<ion-header class="g-header-dark no-border">
  <ion-navbar>
    <ion-title>{{ detail.title}}</ion-title>
    <ion-buttons end (click)="openShareModal()">
      <button ion-button icon-only>
        <i class="iconfont icon-fenxiang"></i>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-segment [(ngModel)]="segment" [class.hide]="!fixed"
             class="product-segment g-border-bottom-1px product-segment-fixed">
  <ion-segment-button [value]="0" (ionSelect)="segmentSelect(0)">
    产品详情
  </ion-segment-button>
  <ion-segment-button [value]="1" (ionSelect)="segmentSelect(1)">
    投资记录
  </ion-segment-button>
</ion-segment>

<ion-content (ionScroll)="contentScroll()">
  <div class="title-box">
    <div class="conversion-box" text-center>
      <b>{{ detail.rate }}%</b>
      <span>预期转化率</span>
    </div>
    <div class="conversion-detail-box">
      <ion-row padding-horizontal>
        <ion-col>
          起投资金 <b>{{ detail.minInvestmentAmount }}元</b>
        </ion-col>
        <ion-col text-right>
          投资期限 <b>{{detail.period + detail.periodType}}</b>
        </ion-col>
      </ion-row>
      <ion-row padding-horizontal>
        <ion-col>
          募集总额 <b>{{detail.amount}}元</b>
        </ion-col>
        <ion-col text-right>
          已完成 <b>{{ detail.progress}}%</b>
        </ion-col>
      </ion-row>
    </div>
  </div>
  <ion-segment [(ngModel)]="segment" [class.hide]="fixed"
               class="product-segment g-border-bottom-1px">
    <ion-segment-button [value]="0" (ionSelect)="segmentSelect(0)">
      产品详情
    </ion-segment-button>
    <ion-segment-button [value]="1" (ionSelect)="segmentSelect(1)">
      投资记录
    </ion-segment-button>
  </ion-segment>
  <div class="segment-blank" *ngIf="fixed"></div>
  <g-slides (didChange)="segment = $event" [index]="segment" [disabledPointer]="fixed">
    <div class="slide1 g-product-detail" padding>
      {{ detail.detail }}
    </div>
    <div class="slide2" padding #gDefaultBox>
      <g-default type="record" title="还没有记录" #gDefault *ngIf="recordList.length==0"></g-default>
      <div class="record-info g-border-1px" *ngFor="let item of recordList">
        <div class="img-box">
          <img src="./assets/imgs/icon_avatar.png" alt="">
        </div>
        <div class="info">
          <span>{{ item.cellphone }}</span>
          <b>{{ item.investTime }}</b>
        </div>
        <b float-right>{{ item.investAmount }}</b>
      </div>
    </div>
  </g-slides>
</ion-content>

<ion-footer class="g-footer-button danger">
  <button ion-button full (click)="gotoPage('pay')" [disabled]="!canBid()">{{canBid()?'立即投资':'满标'}}</button>
</ion-footer>
